
<template>
    <ContentBase>

        <div class="row">
          <div class="col-3">
            <UserProfileInfo @follow="follow" @unfollow="unfollow"  :user="user" />
            <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" />
          </div>
          <div class="col-9">
            <UserProfilePosts :user="user" :posts="posts" @delete_a_post="delete_a_post" />
          </div>
        </div>
    </ContentBase>
  </template>
  
  <script>
  import ContentBase from '../components/ContentField'
  import UserProfileInfo from '../components/UserProfileInfo';
  import UserProfilePosts from '../components/UserProfilePosts';
  import UserProfileWrite from '../components/UserProfileWrite';
  import { reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import $ from 'jquery';
  import { useStore } from 'vuex';
  import { computed } from 'vue';
  
  export default {
    name: 'UserList',
    components: {
        ContentBase,
        UserProfileInfo,
        UserProfilePosts,
        UserProfileWrite
    },
    setup() {
      const store = useStore();
      const route = useRoute();
      const userId = parseInt(route.params.userId);
      const user = reactive({});
      const posts = reactive({});

      user.is_followed = false;//默认没关注
      let my_id = store.state.user.id;
  
      $.ajax({
        url: "http://127.0.0.1:3000/myspace/getuser/",
        type: "POST",
        data: {
          user_id: userId,
        },
        headers: {
          'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
          user.id = resp.id;
          user.username = resp.username;
          user.photo = resp.photo;
          user.followercount = resp.followercount;
          user.attentionids = resp.attentionids;
          if(resp.attentionids!=null){
            
            let ids = (resp.attentionids).split("#");
            for(let i=0;i<ids.length;i++){
                    if(parseInt(ids[i])===parseInt(my_id)){
                        user.is_followed = true;//这个是只在这个组件的设置，当前对象是否被本玩家关注
                }
            }

          }
          
          
        }
      });

      const getpost = ()=>{
            $.ajax({
            url: "http://127.0.0.1:3000/myspace/getpost/",
            type: "POST",
            data: {
            user_id: userId,
            },
            headers: {
            'Authorization': "Bearer " + store.state.user.token,
            },
            success(resp) {
            posts.count = resp.length;
            posts.posts = resp;
            }
        });
      }
      getpost();//自动调用
  
      
  
      const follow = () => {
        if (user.is_followed) return;
        user.is_followed = true;
        user.followercount ++ ;
      };
  
      const unfollow = () => {
        if (!user.is_followed) return;
        user.is_followed = false;
        user.followercount -- ;
      };
  
      const post_a_post = () => {
        posts.count ++ ;
        // posts.posts.unshift({
        //   id: posts.count,
        //   userId: 1,
        //   content: content,
        // })
        getpost();//发完贴后，帖子按时间倒序查找，所以要重新拉取展示
      };
  
      const delete_a_post = post_id => {
        posts.posts = posts.posts.filter(post => post.id !== post_id);
        posts.count = posts.posts.length;
      }
      
      const is_me = computed(() => userId == store.state.user.id);
  
      return {
        user,
        follow,
        unfollow,
        posts,
        post_a_post,
        delete_a_post,
        is_me,
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
  